<template>
	<view class="refund-success-page">
		<!-- 顶部成功状态 -->
		<view class="success-header">
			<view class="success-content">
				<view class="success-title">退款成功</view>
				<view class="success-time">2019年2月14日 09:06</view>
			</view>
			<image class="success-icon" src="/static/svg/refund-success.svg" mode="aspectFit"></image>
		</view>
		
		<!-- 商品信息 -->
		<view class="product-section">
			<view class="product-item">
				<image class="product-image" src="/static/svg/perfume-bottle.svg" mode="aspectFit"></image>
				<view class="product-info">
					<view class="product-name">Kao 香水铃兰香120毫升/瓶 【新老包装随机发货】</view>
					<view class="product-spec">颜色分类：肉粉色</view>
					<view class="product-price">¥100.00</view>
				</view>
			</view>
		</view>
		
		<!-- 换货进度 -->
		<view class="progress-section">
			<view class="section-item" @click="goToProgress">
				<view class="section-title">换货进度</view>
				<image class="arrow-icon" src="/static/svg/right-arrow.svg" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 申请记录 -->
		<view class="record-section">
			<view class="section-header">申请记录</view>
			
			<view class="record-item">
				<view class="record-label">服务类型</view>
				<view class="record-value">换货</view>
			</view>
			
			<view class="record-item">
				<view class="record-label">换货原因</view>
				<view class="record-value">号码不合适</view>
			</view>
			
			<view class="record-item">
				<view class="record-label">收货地址</view>
				<view class="record-value">
					<view>李小花 18854138766</view>
					<view class="address-detail">广东省广州市大华区明离路科技园880号</view>
				</view>
			</view>
			
			<view class="record-item">
				<view class="record-label">申请时间</view>
				<view class="record-value">2018-12-21 10:22:23</view>
			</view>
			
			<view class="record-item">
				<view class="record-label">换货编号</view>
				<view class="record-value">175896336966669</view>
			</view>
		</view>
		
		<!-- 联系客服按钮 -->
		<view class="contact-service" @click="contactService">
			<image class="service-icon" src="/static/svg/customer-service-white.svg" mode="aspectFit"></image>
			<view class="service-text">联系客服</view>
		</view>
	</view>
</template>

<script setup>
	const goToProgress = () => {
		// 跳转到换货进度页面
		uni.navigateTo({
			url: '/pages/my/refund_progress'
		})
	}
	
	const contactService = () => {
		// 联系客服功能
		uni.showModal({
			title: '联系客服',
			content: '是否要联系客服？',
			success: (res) => {
				if (res.confirm) {
					// 这里可以实现具体的联系客服逻辑
					console.log('联系客服')
				}
			}
		})
	}
</script>

<style scoped>
.refund-success-page {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.success-header {
	background: linear-gradient(135deg, #FF5722 0%, #FF7043 100%);
	padding: 60rpx 40rpx 40rpx;
	color: white;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.success-content {
	flex: 1;
}

.success-icon {
	width: 120rpx;
	height: 120rpx;
	flex-shrink: 0;
}

.success-title {
	font-size: 48rpx;
	font-weight: bold;
	margin-bottom: 16rpx;
}

.success-time {
	font-size: 28rpx;
	opacity: 0.9;
}

.product-section {
	background: white;
	margin-top: 20rpx;
	padding: 30rpx;
}

.product-item {
	display: flex;
	align-items: flex-start;
}

.product-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 12rpx;
	margin-right: 24rpx;
	flex-shrink: 0;
}

.product-info {
	flex: 1;
}

.product-name {
	font-size: 32rpx;
	color: #333;
	line-height: 1.4;
	margin-bottom: 12rpx;
}

.product-spec {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
}

.product-price {
	font-size: 36rpx;
	color: #FF5722;
	font-weight: bold;
}

.progress-section {
	background: white;
	margin-top: 20rpx;
}

.section-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.section-title {
	font-size: 32rpx;
	color: #333;
}

.arrow-icon {
	width: 32rpx;
	height: 32rpx;
}

.record-section {
	background: white;
	margin-top: 20rpx;
	padding: 30rpx;
}

.section-header {
	font-size: 36rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 30rpx;
}

.record-item {
	display: flex;
	margin-bottom: 32rpx;
	align-items: flex-start;
}

.record-item:last-child {
	margin-bottom: 0;
}

.record-label {
	width: 160rpx;
	font-size: 28rpx;
	color: #666;
	flex-shrink: 0;
}

.record-value {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
}

.address-detail {
	margin-top: 8rpx;
	color: #666;
}

.contact-service {
	position: fixed;
	bottom: 40rpx;
	left: 50%;
	transform: translateX(-50%);
	background: #FF5722;
	border-radius: 50rpx;
	padding: 20rpx 40rpx;
	display: flex;
	align-items: center;
	box-shadow: 0 8rpx 24rpx rgba(255, 87, 34, 0.3);
}

.service-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 12rpx;
}

.service-text {
	color: white;
	font-size: 28rpx;
	font-weight: 500;
}
</style>
